<template>
	<view>
	
	<!-- 信息标题列表0 -->
	<info-title-list :infoTitleList="animalInfoList0"></info-title-list>
	<!-- 设备信息 -->
	<AnimalInfotb :animalInfotb="animalInfoList1"></AnimalInfotb>
	 <!-- 信息标题列表 -->
	<info-title-list :infoTitleList="animalInfoList"></info-title-list>
	<view>
	  <StepsComponent :steps-data="stepsData" />
	</view>
  </view>
</template>

<script setup>
import Header from '@/components/AppHeader/Header.vue';
import InfoTitleList from '@/components/Animals/InfoTitleList.vue';
import img from '/static/imgs/raw.png';
import AnimalInfotb from '@/components/Animals/AnimalInfotb.vue';
import AnimalInfo from '@/components/Animals/AnimalInfo.vue'
import StepsComponent from '/components/Livestock/StepsComponent.vue'
import { getVaccine } from '@/api/traceability'
import { ref,onMounted } from 'vue'

// 获取 Storage 中的 F_Id
const getFIdFromStorage = () => {
  const fId = uni.getStorageSync('F_Id');
  console.log('从 Storage 获取的 F_Id:', fId);
  return fId || null;
};


const fetchVaccine = async () => {
  const fId = getFIdFromStorage();
  if (!fId) {
    console.error('F_Id 不存在，无法获取疫苗信息');
    return;
  }

  try {
    // 调用接口获取数据
    const response = await getVaccine({ F_liveid: fId });
    console.log('获取到的疫苗信息:', response);
    if(response.code === 200 && response.data){
      const vaccineData = response.data;
      // 更新步骤条数据
      stepsData.value = vaccineData.map(item => {
        return { 
          title: item.F_CreateTime ? new Date(item.F_CreateTime).toLocaleDateString() : '未知日期',
          title1: '疫苗批次号', content1: item.F_Batch || '无',
          title2: '疫苗名称', content2: item.F_Title || '无',
          title3: '操作人员', content3: item.F_Name || '无',
          title4: '接种地址', content4: item.F_Address || '无',
          title5: '接种时间', content5: item.F_JzTime ? new Date(item.F_JzTime).toLocaleString() : '无',
          title6: '接种人员联系电话', content6: item.F_PHone || '无',
          title7: '接种支数', content7: item.F_Number !== null ? item.F_Number.toString() : '无',
          title8: '备注', content8: item.F_Remark || '无'
        };
      });
    }
  } catch (error) {
    console.error('获取疫苗信息时发生错误:', error);
  }
};

// 信息标题列表数据
const animalInfoList0 = [
  {
    title: '证明材料'
  },
];
const animalInfoList = [
  {
    title: '疫苗记录'
  }
];

// 牲畜信息数据
const animalInfoList1 = [
  {
    title: '动物诊疗许可证',
    type: ' '
  },
  {
    title: '动物防疫合格证',
    type: ' '
  },
  {
    title: '疫苗生产批号和有效期证明',
    type: ' '
  },
  {
    title: '疫苗运输和储存温度记录',
    type: ' '
  },
  {
    title: '免疫接种记录',
    type: ' '
  }, 
];

// 定义步骤条数据（初始数据）
const stepsData = ref([
  { 
	title: '2024-01-15',
	title1: '疫苗批次号', content1: 'x123456789',
    title2: '疫苗名称', content2: '口蹄疫疫苗',
    title3: '操作人员', content3: 'xxxx',
	title4: '接种地址', content4: '无',
	title5: '接种时间', content5: '无',
	title6: '接种人员联系电话', content6: '无',
	title7: '接种支数', content7: '无',
	title8: '备注', content8: '无',
   },
]);

onMounted(() => {
  fetchVaccine();
})
</script>

<style scoped lang="scss">

</style>